<template>
	<view>
		


		<view class="container">
			<view class="user_box" v-if="hasLogin">
				<image class="user_head" mode="aspectFill" :src='userInfo.avatar'></image>
				<view class="user_info">
					{{ userInfo.nickname }}
					<view class="user_mobile">
						{{userInfo.mobile}}
					</view>
					<!-- 		<view class="user_mobile " style="display: flex;">
						<view class="kms">
							{{userInfo.kmsId ||'更新中'}}
						</view>
						<text v-if="userInfo.kmsId" class="copy_btn">复制</text>
					</view> -->
				</view>
				<image src="../../static/user/icon_edit.png" mode="widthFix" class="edit_btn"
					@tap="navto('/pages/user/settings/userInfo/userInfo')"></image>
			</view>

			<view class="user_box" v-else @tap="go_login">
				<image class="user_head" mode="aspectFill" :src="logoImage"></image>
				<view class="user_info">
					未登录
				</view>
				<image src="../../static/user/icon_edit.png" mode="widthFix" class="edit_btn"></image>
			</view>

			<view class="block_box">
				<image src="/static/user/block_icon.png" mode="widthFix" class="icon_block"></image>
				<view class="see_detail " @tap="see_id()">
					<text style="position: relative;">
						查看详情
					</text>
				</view>
			</view>

			<view class="menu_box">
				<view class="menu_title">
					我的订单
					<view class="see_all" @tap="go_order(0)">
						查看全部
						<n-icon name="right" size="20" color="#9B9CA0"></n-icon>
					</view>
				</view>
				<view class="order_btn_list">
					<view class="order_item" @tap="go_order(0)">
						<image src="../../static/user/order_icon/order_status_4.png" mode="heightFix"
							class="order_icon"></image>
						全部
					</view>
					<view class="order_item" @tap="go_order(1)">
						<image src="../../static/user/order_icon/order_status_1.png" mode="heightFix"
							class="order_icon"></image>
						进行中
					</view>
					<view class="order_item" @tap="go_order(2)">
						<image src="../../static/user/order_icon/order_status_2.png" mode="heightFix"
							class="order_icon"></image>
						已完成
					</view>
					<view class="order_item" @tap="go_order(3)">
						<image src="../../static/user/order_icon/order_status_3.png" mode="heightFix"
							class="order_icon"></image>
						已取消
					</view>
				</view>
			</view>
			<view class="menu_box">
				<view class="menu_title color-f">
					推荐功能
				</view>
				<view class="menu_btn_list ">
					<view class="order_item item" style="color: #C9CACF;" v-for="item,id in menu_list" :key="id"
						@tap="navto(item.url)">
						<image :src="item.icon" mode="heightFix" class="menu_icon"></image>
						{{item.name}}
					</view>
					<view class="item">
					</view>
					<view class="item">
					</view>
					<view class="item">
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="shareBox" type="center">
			<image :src="share_img" mode="widthFix" class="share_img"></image>
			<!-- 
			<view class="confirm" @tap="save">
				<image src="/static/index/btn_bg_medium.png" class="bottom_btn_img" mode="scaleToFill"></image>
				<text class="confirm_border_text">
					保存海报
				</text>
			</view>
			<view class="tips_ss">
				微信浏览器可长按保存
			</view> -->
		</uni-popup>
		<view class="" style="height: 300rpx;">

		</view>
		<tabbarqn :current="3"></tabbarqn>
	</view>
</template>

<script>
	import {
		h5Url
	} from '@/config/config.js'
	import {
		checkLogin
	} from '@/config/mixins.js'
	import tabbarqn from '@/components/tabbarqn.vue'
	export default {
		components: {
			tabbarqn
		},
		mixins: [checkLogin],
		data() {
			return {
				hasLogin: false,
				userInfo: {}, // 用户信息
				config: '', //配置信息
				isNavto: false,
				share_img: '',
				menu_list: [

					{
						id: 1,
						name: '钱包',
						icon: '/static/user/menu_icon/menu_icon_1.png',
						url: '/pages/user/wallet/wallet'
					},
					{
						id: 2,
						name: '盲盒记录',
						icon: '/static/user/menu_icon/menu_icon_2.png',
						url: '/pages/user/manghe/record'
					},
					{
						id: 3,
						name: '分享有礼',
						icon: '/static/user/menu_icon/menu_icon_3.png',
						url: 'share'
					}, {
						id: 4,
						name: '转赠记录',
						icon: '/static/user/menu_icon/menu_icon_4.png',
						url: '/pages/user/give_record/give_record'
					},

					{

						id: 5,
						name: '设置',
						icon: '/static/user/menu_icon/menu_icon_5.png',
						url: '/pages/user/settings/settings'
					},
					{
						id: 6,
						name: '转售记录',
						icon: '/static/user/menu_icon/menu_icon_5.png',
						url: '/pages/user/sale/sale?status=0'
					},
					{
						id: 7,
						name: '邀请记录',
						icon: '/static/user/menu_icon/menu_icon_6.png',
						url: '/pages/user/invite/gift',
					},

					{
						id: 8,
						name: '熔炉',
						url: '/pages/user/compound/ronglu',
						icon: '/static/user/menu_icon/menu_icon_7.png',
					},
				]
			}
		},
		onShow() {
			this.isNavto = true;
			this.initData()
		},
		methods: {
			see_id: function() {
				if (!this.hasLogin) {
					if (this.isNavto) {
						this.checkIsLogin()
						this.isNavto = false;
						return
					}
					return
				}
				if (this.userInfo.real_status != 1) {
					this.$common.errorToShow('请先实名认证', () => {
						uni.navigateTo({
							url: '/pages/user/apply/apply'
						})
					})
					return
				}
				if (this.userInfo.kmsId) {
					uni.showModal({
						content: '您的区块链ID是:' + this.userInfo.kmsId,
						confirmText: '复制',
						cancelColor: '取消',
						confirmColor: '#5884f0',
						success: (res) => {
							if (res.confirm) {
								uni.setClipboardData({
									data: this.userInfo.kmsId,
									success: () => {
										this.$common.errorToShow('已复制剪贴板')
									}
								})
							}
						}
					});
				} else {
					this.$common.errorToShow('请稍后再试')
					this.initData()
				}
			},

			save: function() {

				// #ifdef H5
				this.downloadIamge(this.share_img, 'image');
				// #endif

				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
				this.downloadImageOfMp(this.share_img)
				// #endif

			},

			go_login: function() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			initData() {
				// 获取用户信息
				var _this = this
				if (this.$db.get('userToken')) {
					this.hasLogin = true
					this.$api.userInfo({}, res => {
						if (res.status) {
							var reg = /(\d{3})\d{4}(\d{4})/; //正则表达式
							res.data.mobile = res.data.mobile.replace(reg, "$1****$2")
							_this.userInfo = res.data
						}
					})
				} else {
					this.hasLogin = false
				}
			},
			getUserInfo(e) {
				let _this = this
				//return false;
				if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
					_this.$common.errorToShow('未授权')
				} else {
					var data = {
						open_id: _this.open_id,
						iv: e.detail.iv,
						edata: e.detail.encryptedData,
						signature: e.detail.signature
					}
					//有推荐码的话，带上
					var invitecode = _this.$db.get('invitecode')
					if (invitecode) {
						data.invitecode = invitecode
					}
					_this.toWxLogin(data)
				}
			},
			navto: function(url) {
				if (!this.hasLogin) {
					if (this.isNavto) {
						this.checkIsLogin()
						this.isNavto = false;
						return
					}
					return
				}
				if (url == 'share') {

					let data = {
						page: 1,
						type: 3,
						client: 1,
						token: this.$db.get('userToken')
					}
					// 2023-8-22
					data.url = h5Url + '/#/pages/share/jump';


					this.$api.share(data, res => {
						if (res.status) {
							this.share_img = res.data;
							this.$refs.shareBox.open()
						}
					})

					return
				}
				if (url == 'share2') {
					this.share_img = this.$store.state.config.invite_image;
					this.$refs.shareBox.open()
					return
				}
				if (url == 'record') {
					uni.switchTab({
						url: '../collection/collection'
					})
				}

				if (!url) {
					this.$common.errorToShow('功能暂未开放')
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			go_order: function(id) {

				uni.navigateTo({
					url: 'order/order?status=' + id
				})
			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
				this.$refs.shareBox.close()
			},
			downloadImageOfMp(image) {
				let _this = this

				// 先下载到本地
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: image,
							success() {
								_this.$common.successToShow('保存成功')
								_this.$refs.shareBox.close()
							},
							fail() {
								_this.$common.errorToShow('图片保存失败')
							}
						});
					},
					fail() {
						_this.$common.errorToShow('下载失败')
					}
				})
			}
		},
		computed: {
			logoImage() {
				return this.$store.state.config.shop_logo;
			},
		},
	}
</script>

<style>
	.confirm_border_text {
		font-size: 28rpx;
		font-weight: bold;
		color: #EEDCAA;
		position: relative;

	}

	.confirm_border {}

	.confirm {
		width: 568rpx;
		height: 79rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tips_ss {
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		padding-top: 20rpx;

	}

	.save_btn {
		width: 450rpx;
		height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		margin: 0 auto;
		background: linear-gradient(90deg, #F4E1BC 0%, #C3A05A 100%);
		color: #433009;
		border-radius: 10rpx;
	}

	.share_img {
		width: 568rpx;
		height: 632rpx;
		margin-bottom: 40rpx;
	}

	.logo_img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.bottom_tips {
		width: 100%;
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #d4d4d4;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
	}

	.menu_icon {
		height: 43rpx;
		width: 49rpx;
		margin-bottom: 14rpx;
	}

	.menu_btn_list {
		width: 100%;
		padding-top: 40rpx;
		display: grid;
		grid-template-columns: repeat(4, 25%);
		grid-template-rows: repeat(2, 140rpx);
	}

	.item {}

	.order_icon {
		width: 38rpx;
		height: 44rpx;
		margin-bottom: 14rpx;
	}

	.order_item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 28rpx;
		color: #fff;
		position: relative;
	}

	.number {
		position: absolute;
		top: 0rpx;
		right: 30rpx;
		background-color: #f00;
		border-radius: 20rpx;
		height: 40rpx;
		width: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		line-height: 1;
		color: #fff;
	}

	.order_btn_list {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4, 25%);
		grid-template-rows: repeat(1, 120rpx);
		padding-top: 40rpx;
	}

	.order_btn_list2 {
		grid-template-rows: repeat(3, 120rpx);
	}

	.see_all {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999;
	}

	.menu_title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #fff;
		padding: 0 40rpx;
	}

	.menu_box {
		width: 100%;
		border-radius: 30rpx;
		padding: 35rpx 0;
		margin-bottom: 30rpx;

		background: #202126;
		box-shadow: 0px -5rpx 10rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
	}

	.see_detail {
		width: 148rpx;
		height: 51rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #433009;
		background: linear-gradient(90deg, #F2D7AA, #DEBC86);
		position: relative;
		border-radius: 10rpx;
	}

	.see_detail_bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.icon_block {
		width: 220rpx;
		height: 45rpx;

	}

	.balance_num {
		font-size: 28rpx;
		color: #cfcfcf;

	}

	.balance {
		font-size: 36rpx;
		font-weight: bold;
		color: #E6E6E6;
	}

	.block_box {
		width: 100%;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		height: 120rpx;

		background: #202126;
		box-shadow: 0px -5rpx 10rpx 1rpx rgba(0, 0, 0, 0.53);
		border-radius: 20rpx;
		opacity: 1;
	}

	.edit_btn {
		width: 32rpx;
		position: absolute;
		top: 150rpx;
		right: -5rpx;
		height: 32rpx;
	}

	.user_mobile {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
		color: #fff;
	}

	.kms {
		width: 350rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.copy_btn {
		color: #91E7FF;
		padding-left: 10rpx;
	}

	.user_info {
		flex: 1;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 45rpx;
		padding-top: 14rpx;
		color: #fff;
		position: relative;
		padding-left: 20rpx;

	}

	.user_head {
		width: 128rpx;
		height: 128rpx;
		border: 4rpx solid #1A4874;
		background-color: #1A4874;
		border-radius: 50%;

	}

	.user_box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 120rpx;
		position: relative;
		padding-bottom: 60rpx;
		/* flex-direction: column; */
	}

	.container {
		width: 100%;
		padding: 0 45rpx;
		position: relative;
		z-index: 1;
	}

	.user_bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	page {
		background-color: #0d0d0d;
	}
</style>
